<http>
	<head>
		<link href="test.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
	</head>
	<body>
		<div id="image-container">
			<!--<div id="raw-image-container">
				<img src="2008-jesus-cambridge-lores.jpeg">
			</div>-->
			<div id="mouseover-container">
			</div>
		</div>
		<p id="human-details"></p>
		<script type="text/javascript">
		var w=1223;
		var h=573;

		function coordsToVertices(coords) {
			ret = []
			for (var i=0; i< coords.length; i++) {
				ret.push([coords[i].PhotoCoords.X, coords[i].PhotoCoords.Y])
			}
			return ret
		}

		function draw_voronoi(vertices){

		var svg = d3.select("#mouseover-container")
			.append("svg:svg")
				.attr("width", w)
				.attr("height", h)
			.append("svg:g")
				.attr("width", "100%")
				.attr("height", "100%")
				.attr("enable-background", "new");
		var paths, points, clips;

		svg.append("svg:defs")
						.append("svg:filter")
							.attr("id", "blur")
						.append("svg:feGaussianBlur")
							.attr("stdDeviation", 5);

		svg.append("svg:image")
			.attr("xlink:href", "http://localhost:8888/media/class-photos/2008-jesus-cambridge-lores.jpeg")
			.attr("width", "100%")
			.attr("height", "100%")
			.attr("id", "class-pic");
			//.attr("filter", "url(#blur)");

		clips = svg.append("svg:g").attr("id", "point-clips");
		points = svg.append("svg:g").attr("id", "points");
		paths = svg.append("svg:g").attr("id", "point-paths");

		clips.selectAll("clipPath")
				.data(vertices)
			.enter().append("svg:clipPath")
				.attr("id", function(d, i) { return "clip-"+i;})
			.append("svg:circle")
				.attr('cx', function(d) { return d[0]; })
				.attr('cy', function(d) { return d[1]; })
				.attr('r', 10);

		paths.selectAll("path")
				.data(d3.geom.voronoi(vertices))
			.enter().append("svg:path")
				.attr("d", function(d) { return "M" + d.join(",") + "Z"; })
				.attr("id", function(d,i) { 
					return "path-"+i; })
				.attr("clip-path", function(d,i) { return "url(#clip-"+i+")"; })
				.style("fill", d3.rgb(230, 230, 230))
				.style('opacity', 0.2)
				.style("stroke", d3.rgb(200,200,200));

		paths.selectAll("path")
			.on("mouseover", function(d, i) {
				d3.select(this)
					.style('fill', d3.rgb(31, 120, 180));
				svg.select('circle#point-'+i)
					.style('fill', d3.rgb(31, 120, 180));
				d3.select("#human-details").html(getHumanText(i))
			})
			.on("mouseout", function(d, i) {
				d3.select(this)
					.style("fill", d3.rgb(230, 230, 230));
				svg.select('circle#point-'+i)
					.style('fill', 'white');
				d3.select("#human-details").html("")
			});

		points.selectAll("circle")
				.data(vertices)
			.enter().append("svg:circle")
				.attr("id", function(d, i) { 
					return "point-"+i; })
				.attr("transform", function(d) { return "translate(" + d + ")"; })
				.attr("r", 2)
				.attr('stroke', 'none')
				.style("fill-opacity", 0);
		}

		function getHumanText(index) {
			if (humans[index].Name != "") {
				return humans[index].Name;
			}
			return "Index: " + index + "</br>Data: " + "(x: " + humans[index].PhotoCoords.X+ ", y:" + humans[index].PhotoCoords.Y + ")"
		}

		var humans = []

		jQuery.getJSON("http://localhost:8888/humans", function(data) {humans=data;
			draw_voronoi(coordsToVertices(data));});
		</script>
	</body>
</http>
